#gridPanel {
  width: 480px;
  height: 480px;
  margin: 0 auto;
  background: #bbada0;
  border-radius: 10px;
  position: relative;
}

.grid,
.cell {
  width: 100px;
  height: 100px;
  border-radius: 6px;
}

.grid {
  background: #ccc0b3;
  float: left;
  margin: 16px 0 0 16px;
}

.cell {
  position: absolute;
  font-size: 60px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

[id^="c0"] {
  top: 16px;
}

[id^="c1"] {
  top: 132px;
}

[id^="c2"] {
  top: 248px;
}

[id^="c3"] {
  top: 364px;
}

[id^="c4"] {
  top: 480px;
}

[id^="c5"] {
  top: 596px;
}

[id$="0"] {
  left: 16px;
}

[id$="1"] {
  left: 132px;
}

[id$="2"] {
  left: 248px;
}

[id$="3"] {
  left: 364px;
}

[id$="4"] {
  left: 480px;
}

[id$="5"] {
  left: 596px;
}

.n2 {
  background-color: #eee3da
}

.n4 {
  background-color: #ede0c8
}

.n8 {
  background-color: #f2b179
}

.n16 {
  background-color: #f59563
}

.n32 {
  background-color: #f67c5f
}

.n64 {
  background-color: #f65e3b
}

.n128 {
  background-color: #edcf72
}

.n256 {
  background-color: #edcc61
}

.n512 {
  background-color: #9c0
}

.n1024 {
  background-color: #33b5e5
}

.n2048 {
  background-color: #09c
}

.n4096 {
  background-color: #a6c
}

.n8192 {
  background-color: #93c
}

.n2,
.n4 {
  color: #776e65
}

.n1024,
.n2048,
.n4096,
.n8192 {
  font-size: 40px
}

p {
  width: 480px;
  margin: 0 auto;
  padding-top: 15px;
  font-size: 40px;
  font-weight: bold;
  font-family: Arial;
}

#gameOver {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#gameOver>div {
  width: 100%;
  height: 100%;
  background: #555;
  opacity: 0.5;
}

#gameOver>p {
  position: absolute;
  width: 300px;
  height: 200px;
  /*鄙视题:如何让div在文档显示区居中*/
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -150px;
  border: 1px solid #edcf72;
  border-radius: 10px;
  text-align: center;
  line-height: 1.5em;
  background: #fff;
}

#gameOver .btn {
  cursor: pointer;
  background: #9f8d77;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
}